<template>
  <div class="ranking">
    <theme-header-rcmd title="榜单" />
    
    <div class="tops">
      <ranking-list :item="upRanking" />
      <ranking-list :item="originRanking" />
      <ranking-list :item="newRanking" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import { useStore } from "vuex";

import { useState } from "@/hooks";

import ThemeHeaderRcmd from "@/components/theme-header-rcmd/index.vue";
import RankingList from "@/components/ranking-list/index.vue";

export default defineComponent({
  components: {
    ThemeHeaderRcmd,
    RankingList
  },
  setup() {
    const store = useStore();

    const { upRanking, originRanking, newRanking } = useState("recommend", ["upRanking", "originRanking", "newRanking"]);
    
    onMounted(() => {
      store.dispatch('recommend/getRankingAction', 3)
      store.dispatch('recommend/getRankingAction', 2)
      store.dispatch('recommend/getRankingAction', 0)
    });

    return {
      upRanking, 
      originRanking, 
      newRanking
    }
  }
})
</script>

<style lang="less" scoped>
.tops {
  display: flex;
  background-color: purple;
  margin: 20px 0;
  height: 472px;
  background-image: url("~@/assets/img/recommend-top-bg.png");
}
</style>